<template>
    <view class="sport page" v-if="isEnd">
        <view class="sport-top-wrapper">
            <view class="status_bar">
            </view>
            <div class="sport-count">{{ sportCount }}</div>
            <view class="sport-title">已运动公里数</view>
            <div class="sport-map">
              <CMap :points="resultPoints" @distance="setDistance"></CMap>
            </div>
        </view>
        <view class="sport-content">
            <view class="title">本次运动数据</view>
            <view class="total">
                <view class="total-num">{{ total }}</view>
                <view class="total-unit">总距离(千米)</view>
            </view>

            <view class="card-list">
                <div class="card-item" v-for="item in cardList" :key="item.icon">
                    <div :class="['img', item.icon]"></div>
                    <div>
                        <div class="value">
                            {{ item.value }}
                        </div>
                        <div class="unit">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </view>
        </view>
        <TabBar page-path="/pages/sport/sport"></TabBar>
    </view>

  <view class="sport2 page" v-else>
    <CMap2 height="100vh" :points="points" :is-run="isRun" :is-end="isEnd"></CMap2>
    <div class="btn" v-if="!isRun" @click="changeRun(true)">
      开始
    </div>
    <div class="btn run" v-if="isRun" @click="changeRun(false)">
      停止
    </div>

    <TabBar page-path="/pages/sport/sport"></TabBar>
  </view>
</template>

<script>
import http from '@/api/api.js'
import CMap from '../Map'
import CMap2 from '../Map2'
import { getWXLocation } from "../../utils/location";

export default {
    data() {
        return {
            sportCount: 0,
            total: 0,
            cardList: [
                {
                    icon: 'icon1',
                    value: 0,
                    name: '总时长(分钟)'
                },
                {
                    icon: 'icon2',
                    value: 0,
                    name: '总步数'
                },
                {
                    icon: 'icon3',
                    value: 0,
                    name: '平均速度'
                },
                {
                    icon: 'icon4',
                    value: 0,
                    name: '消耗热量(千卡)'
                }
            ],
            points: [

            ],
            isRun: false,
            isEnd: false,
            resultPoints: [

            ],
            totalTime: 0,
          totalTimeInterval: null,
          day_id: null
        }
    },
  components: {
    CMap,
    CMap2,
  },
    onLoad() {
      http.getHome({}).then(res => {
        if (res.code === 0) {
          this.sportCount = res.distance
        }
      })
      this.getData()
    },
    methods: {
      // 设置路径
      setDistance(distance) {
        this.total = !distance ? 0 : parseFloat(distance / 1000).toFixed(2)
        this.cardList = [
          {
            icon: 'icon1',
            value: this.getTime(this.totalTime),
            name: '总时长(分钟)'
          },
          {
            icon: 'icon2',
            value: 0,
            name: '总步数'
          },
          {
            icon: 'icon3',
            value: this.getTime( this.totalTime / this.total ) + '/千米',
            name: '平均速度'
          },
          {
            icon: 'icon4',
            value: 0,
            name: '消耗热量(千卡)'
          }
        ]
      },
      getTime(totalTime) {
        const minute = !this.total ? 0 : parseInt(totalTime / 60)
        const second = !this.total ? 0 : parseInt(totalTime % 60)
        return `${minute}:${second}`
      },
        getData() {
            http.getHome({}).then(res => {
                if (res.code === 0) {
                    console.log(res.data)
                }
            })
        },
      changeRun(val) {
          this.isRun = val
          this.day_id = null
          clearInterval(this.totalTimeInterval)
          this.totalTimeInterval = null

          if (val) {
            this.totalTime = 0
            this.totalTimeInterval = setInterval(() => {
              this.totalTime++
            },1000)
            // wx.getLocation({
            //   type: 'gcj02', // type有两中类型，gcj02 是腾讯地图所能解析的
            //   success: res => {
            //     console.log('当前位置',res, this)
            //     this.longitude = res.longitude
            //     this.latitude = res.latitude
            //     this.points.push( {
            //       latitude: res.latitude,
            //       longitude: res.longitude,
            //       speed: 6.4352341234, //speed m/s
            //     },)
            //
            //     getWXLocation().then(res => {
            //       console.log('实时定位', res)
            //       this.points.push( {
            //         latitude: res.latitude,
            //         longitude: res.longitude,
            //         speed: 6.4352341234, //speed m/s
            //       },)
            //       this.resultPoints = this.points
            //       console.log('this.resultPoints', this.resultPoints)
            //     })
            //
            //     http.start({
            //       longitude: res.longitude,
            //       latitude: res.latitude,
            //       type: 2
            //     }).then(res => {
            //       this.day_id = res.steps[0].id
            //     })
            //
            //   },
            //   fail: res => {
            //       uni.showToast({
            //           title: '30秒请勿重复定位'
            //       })
            //     console.log('当前位置111',res)
            //   }
            // })
        } else {
            http.end({
              longitude: this.resultPoints[this.resultPoints.length - 1].longitude,
              latitude: this.resultPoints[this.resultPoints.length - 1].longitude,
              type: 2,
              day_id: this.day_id
            }).then(res => {
              uni.showToast({
                title: res.msg,
                icon: "none"
              })
            })
            this.isEnd = true
          }
      }
    }
}
</script>

<style lang="less" scoped>
.sport2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
  .btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 200rpx;
    width: 200rpx;
    height: 200rpx;
    background-color: #4cd964;
    color: #333333;
    border-radius: 50%;
    text-align: center;
    font-size: 36rpx;
    line-height: 200rpx;
  }
  .btn.run {
    background-color: #666666;
    color: #fff;
  }
}
.sport {
    height: 100vh;
    overflow: auto;
    .status_bar {
        height: 200rpx;
    }
    .sport-count {
        font-size: 102rpx;
        line-height: 102rpx;
        font-family: DIN;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 18rpx;
    }
    .sport-map {
        width: 686rpx;
        height: 678rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin: 0 auto;
      overflow: hidden;
    }
    .sport-title {
        margin-top: 30rpx;
        width: 100%;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-bottom: 100rpx;
    }
}
.sport-top-wrapper {
    background-color: #0F153B;
}
.sport-content {
    background: #FFFFFF;
    width: 686rpx;
    height: 628rpx;
    border-radius: 20rpx;
    margin: 34rpx auto;
    padding: 40rpx 35rpx;
    .title {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 35rpx;
    }
    .card-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .card-item {
            width: 49%;
            height: 124rpx;
            background: #F7F7F7;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            padding-left: 26rpx;
            margin-bottom: 18rpx;
            .value {
                font-size: 40rpx;
                line-height: 40rpx;
                font-family: DIN;
                font-weight: 500;
                color: #333333;
            }
            .unit {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
            }
            .img {
                width: 42rpx;
                height: 42rpx;
                margin-right: 14rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .icon1 {
                background-image: url("/static/images/sport/date.png");
            }
            .icon2 {
                width: 21rpx;
                height: 54rpx;
                margin-right: 27rpx;
                background-image: url("/static/images/sport/step.png");
            }
            .icon3 {
                width: 40rpx;
                margin-right: 16rpx;
                background-image: url("/static/images/sport/run.png");
            }
            .icon4 {
                width: 34rpx;
                margin-right: 24rpx;
                background-image: url("/static/images/sport/hot.png");
            }
        }
    }
    .total {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("/static/images/sport/total.png");
        width: 258rpx;
        height: 166rpx;
        margin: 0 auto;
        margin-bottom: 37rpx;
        .total-num {
            padding-top: 55rpx;
            font-size: 42rpx;
            font-family: DIN;
            font-weight: bold;
            color: #333333;
            text-align: center;
        }
        .total-unit {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            text-align: center;
        }
    }
}
</style>
